<template>
    <dplayer :video="dplayerObj.video"
             :danmaku1="dplayerObj.danmaku"
             :contextmenu="dplayerObj.contextmenu"
             :highlight="dplayerObj.highlight"
    />
</template>
<script setup>
import dplayer from '../../components/player.vue';
import Hls from 'hls.js';
import {ref, reactive} from 'vue'

import {useStoreMain} from '@renderer/store/storeindex.js';
const storeMain = useStoreMain();

const dplayerObj = reactive({
    video: {
        url: storeMain.vedio.playurl, //视频地址
        type: 'customHls',
        customType: {
            customHls: function (video, player) {
                const hls = new Hls(); //实例化Hls  用于解析m3u8
                hls.loadSource(video.src);
                hls.attachMedia(video);
            }
        }
    },
    danmaku: {
        id: '9E2E3368B56CDBB4',
        api: 'https://api.prprpr.me/dplayer/',
        token: 'tokendemo',
        maximum: 1000,
        addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
        user: 'DIYgod',
        bottom: '15%',
        unlimited: true,
        speedRate: 0.5,
    },
    contextmenu: [
        {
            text: 'custom1',
            link: 'https://github.com/DIYgod/DPlayer',
        },
        {
            text: 'custom2',
            click: (player) => {
                console.log(player);
            },
        },
    ],
    highlight: [
        {
            time: 20,
            text: '这是第 20 秒',
        },
        {
            time: 120,
            text: '这是 2 分钟',
        },
    ],
})
</script>
<style lang="scss" scoped>
.dplayer {
    height: calc(100vh - 60px);
}
</style>
